<script setup>
	import { computed, ref } from 'vue'
	import { orderListApi } from '@/services/consult.js'
	const props = defineProps({
		type: {
			type: Number,
			default: 1,
		},
	})
	const current = ref(1)
	const pageSize = 5
	const show = ref(false)
	const status = ref()
	const hasMore = ref()
	const orderList = ref([])
	const refresherTriggered = ref(false)
	// 获取知识列表
	async function getOrderList() {
		// 调用接口获取知识列表
		const { code, data, message } = await orderListApi({
			type: props.type,
			current: current.value,
			pageSize,
		})
		// 检测接口是否调用成功
		if (code !== 10000) return uni.utils.toast(message)
		current.value++
		console.log('data.rows', data.rows)
		orderList.value.push(...data.rows)
		hasMore.value = current.value <= data.pageTotal
		status.value = current.value <= data.pageTotal ? 'more' : 'noMore'
	}
	getOrderList()
	async function onScrollToLower() {
		if (!hasMore.value) return
		status.value = 'loading'
		await getOrderList()
	}
	async function onScrollRefresh() {
		current.value = 1
		orderList.value = []
		refresherTriggered.value = true
		status.value = 'loading'
		await getOrderList()
		// 关闭下拉动画
		refresherTriggered.value = false
	}
	function isShow(item) {
		item.show = !item.show
	}
	function consult(item){
		uni.navigateTo({
			url:`/subpkg_consult/room/index?orderId=${item.id}`
		})
	}
</script>
<template>
	<view class="order-list">
		<scroll-view
			refresher-enabled
			:refresher-triggered="refresherTriggered"
			@refresherrefresh="onScrollRefresh"
			@scrolltolower="onScrollToLower"
			refresher-background="#f6f6f6"
			class="uni-scroll-view"
			scroll-y
		>
			<view class="order-item" v-for="item in orderList" :key="item.id">
				<view class="header">
					<view class="label">
						<image :src="item.avatar" mode="" class="doctor-avatar"></image>
						<text>{{ item.typeValue }}（自动分配医生）</text>
					</view>
					<view v-if="item.status === 1" class="status color-1"> 待支付 </view>
					<view v-if="item.status === 2" class="status color-2"> 待接诊 </view>
					<view v-if="item.status === 3" class="status color-2"> 咨询中 </view>
					<view v-if="item.status === 4" class="status color-3"> 已完成 </view>
					<view v-if="item.status === 5" class="status color-3"> 已取消 </view>
				</view>
				<navigator
					class="consult-body"
					:url="`/subpkg_consult/order_detail/index?id=${item.id}`"
					hover-class="none"
				>
					<view class="item">
						<text class="label">病情描述</text>
						<text class="value">{{ item.illnessDesc }}</text>
					</view>
					<view class="item">
						<text class="label">价格</text>
						<text class="value">￥{{ item.payment }}</text>
					</view>
					<view class="item">
						<text class="label">创建时间</text>
						<text class="value">{{ item.createTime }}</text>
					</view>
				</navigator>
				<view class="footer">
					<view class="more">
						<text @click="isShow(item)">更多</text>
						<uni-transition :show="item.show">
							<view class="list">
								<view class="list-item">查看处方</view>
								<view class="list-item">删除订单</view>
							</view>
						</uni-transition>
					</view>
					<view v-if="item.status === 1" class="btn">
						<button class="uni-button minor">取消订单</button>
						<button class="uni-button">继续支付</button>
					</view>
					<view v-if="item.status === 2" class="btn">
						<button class="uni-button minor">取消订单</button>
						<button class="uni-button" @click="consult(item)">继续咨询</button>
					</view>
					<view v-if="item.status === 3" class="btn">
						<button class="uni-button" @click="consult(item)">继续咨询</button>
					</view>
					<view v-if="item.status === 4" class="btn">
						<button class="uni-button minor">问诊记录</button>
						<button v-if="item.evaluateId" class="uni-button">查看评价</button>
						<button v-else class="uni-button">去评价</button>
					</view>
					<view v-if="item.status === 5" class="btn">
						<button class="uni-button minor">删除订单</button>
						<button class="uni-button">咨询其它医生</button>
					</view>
				</view>
			</view>
			<!-- 加载状态 -->
			<uni-load-more
				:status="status"
				color="#C3C3C5"
				:icon-size="16"
				:content-text="{
					contentdown: '上拉显示更多',
					contentrefresh: '数据正在加载中',
					contentnomore: '没有更多数据了',
				}"
			/>
		</scroll-view>
	</view>
</template>

<style lang="scss">
	.order-list {
		padding: 30rpx;
		background-color: #f6f6f6;
		overflow: hidden;
		box-sizing: border-box;
		padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
		height: calc(100vh - 50px);
		/* #ifdef H5 */
		height: calc(100vh - 94px);
		/* #endif */
		.order-item {
			margin-bottom: 30rpx;
			padding: 30rpx;
			background-color: #fff;
			border-radius: 30rpx;
			.header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				.doctor-avatar {
					width: 40rpx;
					height: 40rpx;
					margin-right: 10rpx;
					border-radius: 50%;
				}
			}
			.status {
				color: #121826;
			}

			.color-1 {
				color: #f2994a;
			}

			.color-2 {
				color: #16c2a3;
			}

			.color-3 {
				color: #848484;
			}
			.consult-body {
				padding: 40rpx 0;
				.item {
					line-height: 2;
					display: flex;
					.label {
						font-size: 26rpx;
						color: #979797;
						width: 200rpx;
					}
					.value {
						flex: 1;
						font-size: 28rpx;
					}
				}
			}
			.footer {
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-top: 1rpx solid #f5f5f5;
				padding-top: 20rpx;
				.more {
					font-size: 26rpx;
					color: #979797;
					position: relative;
					.list {
						// display: none;
						position: absolute;
						left: 0;
						bottom: 55rpx;
						z-index: 99;
						width: 160rpx;
						text-align: center;
						padding: 10rpx 30rpx;
						border-radius: 10rpx;
						font-size: 28rpx;
						box-shadow: 0 0 30rpx rgba(50, 50, 51, 0.3);
						background-color: #fff;
						&::after {
							position: absolute;
							left: 30rpx;
							bottom: -28rpx;
							content: '';
							border: 14rpx solid;
							border-color: #fff transparent transparent transparent;
						}
						.list-item {
							padding: 20rpx;
							border-bottom: 1rpx solid #eee;
							&:last-child {
								border-bottom: none;
							}
						}
					}
				}
				.btn {
					display: flex;

					.uni-button {
						height: 60rpx;
						line-height: 60rpx;
						/* #ifdef MP */
						line-height: 59rpx;
						/* #endif */
						margin: 0 0 0 30rpx;
						font-size: 26rpx;
						color: #16c2a3;
						border: 1rpx solid #16c2a3;
						background-color: #fff;
						&.minor {
							color: #3c3e42;
							border-color: #ededed;
							background-color: #fafafa;
						}
					}
				}
			}
		}
	}
	:deep(.uni-scroll-view-refresh) {
		margin-bottom: 20rpx;
	}
</style>
